.color1 {
    color: #f66a38 !important;
}

// 定义一个 mixin 来生成不同颜色的状态样式
@mixin status($color) {
    padding: 4px 15px;
    border-radius: 6px;
    border: 1px solid $color;
    background-color: rgba($color, 0.3);
    color: $color;
    cursor: pointer;
    display: inline-block;
}
.status1 {
    @include status(#04B578);
}
.status2 {
    @include status(#0170FE);
}
.status3 {
    @include status(#CCCCCC);
}
.status4 {
    @include status(#FF9F18);
}
.status5 {
    @include status(#94C474);
}

// 定义 mixin 和变量

$widths: (
    "width30": 30px,
    "width60": 50px,
    "width150": 150px,
    "width130": 130px,
    "width200": 200px,
    "width110": 110px,
    "width80": 80px
);
@mixin generateWidthClasses {
    @each $class, $width in $widths {
        .#{$class} {
            width: $width;
        }
    }
}

// 调用 mixin
@include generateWidthClasses;
